<template>
  <div>
    <input v-model="url" placeholder="输入连接地址"/>
    <br>
    <input v-model="messages" placeholder="输入指令"/>
    <br>
    <input v-model="key" placeholder="输入Key"/>
    <br>
    <button @click="execute">执行</button>
    <p style="color: red">{{ infoMsg }}</p>
  </div>
</template>

<script setup lang="ts">
import {HubConnectionBuilder} from "@microsoft/signalr";
import {ref, onMounted} from "vue";
import sm2Util from "@/utils/sm2Util";

const url = ref("");  // 连接地址
const messages = ref("");  // 自毁指令
const key = ref("");  // 自毁验证Key
const infoMsg = ref("");

const connection = new HubConnectionBuilder().withUrl(url.value).build();

onMounted(() => {
  connection.start()
      .then(() => infoMsg.value = "连接已启动")
      .catch((error) => infoMsg.value = "启动连接时出错：" + error);
  connection.on("ReceiveMessage", receiveMessage);
});

const execute = async () => {
  messages.value = sm2Util.sm2Encrypt(messages.value);
  key.value = sm2Util.sm2Encrypt(key.value);
  await connection.send("SendDeleteSelfAsync", messages.value, key.value).catch((err) => {
    infoMsg.value = err;
  });
};

const receiveMessage = (msg: string) => {
  infoMsg.value = msg;
};
</script>

<style scoped>
input {
  margin-bottom: 8px;
  width: 400px;
  height: 30px;
}

button {
  width: 80px;
  height: 40px;
}
</style>
